<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
    <link rel="stylesheet" href="../../resources/css/app.css" type="text/css" />
    <title>AIOS Visualization</title>
  	<script type="text/javascript" src="../../resources/js/sencha-touch-all-debug.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../resources/js/dataStores.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../resources/js/dataTables.js" charset="utf-8"></script>
				
	<script type="text/javascript"> var d_i=0; var c_i=0; var m_i=0; var y_i=0; var i=0; var tID = 0;</script>
	<script>
			
	
			Ext.application({
			name: 'AIOS',
			requires: [
			          	'Ext.data.Store',
			          	'Ext.dataview.List',
			      		'Ext.Toolbar',
			           	'Ext.chart.Chart', 
					   	'Ext.chart.interactions.PanZoom',
						'Ext.chart.series.*', 
						'Ext.chart.axis.*', 
						'Ext.chart.*',
						'Ext.TitleBar',
						'Ext.draw.Component',
						'Ext.chart.CartesianChart',
						'Ext.Viewport.*'
			           
			       ],
			launch: function() {
				
					Ext.create("Ext.tab.Panel", {
					fullscreen: true,
					activeItem: 0,
					tabBarPosition: 'bottom',

					items: [
					        
					        
					        
//************************************** Present View **************************************************************************				        
					    
				            {
				                title: '現在値',
				                pressed : true,
				              	iconCls: 'now',
				                styleHtmlContent: true,
				                scrollable: true,
				                
				                listeners: {
									activate: function() {
										
										/* Ext.data.JsonP.request({
											url: 'http://153.121.40.23:8080/aios-api/aios/api/GetCurrentPower.php',
											method: 'POST',
											callbackkey: 'callback',
											scope: this,      
	
											callback: function (response, value, request) {
												var wattComponent = Ext.getCmp('c_wattage');
												wattComponent.setValue(value.response.electric_power);
												storeCurrentData(value.response.electric_power);
												
												var ampereComponent = Ext.getCmp('c_amperage');
												ampereComponent.setValue(value.response.electric_current);
												
											},
	
											failure: function (response, request) {
												Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
											}
										}); */
										
										Ext.data.JsonP.request({
											url: 'http://153.121.40.23:8080/aios-api/aios/api/GetTapGroup.php',
											method: 'POST',
											callbackkey: 'callback',
											params: {
												tap_id: 1
											},

											scope: this,      /// fix handler scope

											callback: function (response, value, request) {
												StoreTapList(value);
												
											},

											failure: function (response, request) {
												Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
											}
										});
										
									}
								},

				            items: [

			///////////////////// Header ////////////////////
				                    
				                    {
				 		       			xtype : 'titlebar',
				 		       			docked : 'top',
				 		       			title : '現在値',
				 		       			items : [
				 		       			{
				 		       				xtype : 'button',
				 		       				align : 'right',
				 		       				ui : 'round',
				 		       				iconCls: 'home',
				 		       				text : 'ホーム',
				 		       				 handler: function(){
				 		       			            document.location.href = "../../index.html";         
				 		       			        }
				 		       				
				 		       			},   
				 		       			{
				 		       				xtype: 'selectfield',
				 		       				id : 'tapGroup',
				 		       				name: 'options',
				 		       				store : storeTap,
				 		       				displayField: 'tapGroupName',
				 		       		 		valueField: 'tapGroupID',
					 		       		 	listeners: {
						 	 	       		 	change: function (select, newValue, oldValue) {
						 		       		 				tID = Ext.getCmp('tapGroup').getValue();
						 		       		 				
						 		       		 			Ext.data.JsonP.request({
															url: 'http://153.121.40.23:8080/aios-api/aios/api/GetCurrentPower.php?tap_id='+tID+'',
															method: 'POST',
															callbackkey: 'callback',
															scope: this,      
					
															callback: function (response, value, request) {
																var wattComponent = Ext.getCmp('c_wattage');
																wattComponent.setValue(value.response.electric_power);
																storeCurrentData(value.response.electric_power);
																
																var ampereComponent = Ext.getCmp('c_amperage');
																ampereComponent.setValue(value.response.electric_current);
																
															},
					
															failure: function (response, request) {
																Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
															}
														}); 
									 		       		} 
					 		       				}
				 		       			}
					 		       		
				 		       			]
				 		            },
				 		            
	//////////////////////////// Set Current Wattage and Amperage///////////////////////
				 		            
				 	               {
				 		    			xtype: 'fieldset',
				 		    		 	layout: {
				 		                    type: 'hbox',
				 		                    pack: 'start', 
				 		                   align: 'middle'
				 		                },
				 		    			items: [
				 		    			
				 		    			{	
				 		    				 	xtype: 'label',
				 		    				 	html: '&nbsp&nbsp現在の使用電力（全体) - ', 
				 		    			},
				 		    			{
				 		    					xtype: 'textfield',
				 		    					id: 'c_wattage',
				 		    					label: 'W :',
				 		    					readOnly: true,
				 		    					text: '1890.9W'
				 		    				},
				 		    				{
				 		    					xtype: 'textfield',
				 		    					id: 'c_amperage',
				 		    					label: 'A :',
				 		    					readOnly: true,
				 		    					text: '18.91A'
				 		    			}
				 		    			]
				 		    		},
				 		    		
									////////// graph/////////	
									
					 	               {
					 	                   xtype: 'carousel',
					 	                   height: 550,
						 	         	   width: '100%',
	
					 	                   defaults: {
					 	           			styleHtmlContent: true
					 	           		},	
					 	           				

							 	           items: [ 
							 	                  
							 	                  {
														xtype: 'chart',
														background: 'white',
														width: '100%',
														height: 550,
											            animate: true,
											            store: storeCurrent,
											            axes: [{
												                type: 'numeric',
												                position: 'right',
												                fields: ['data1'],
												                title: {
												                    text: '電力量(W)',
												                    fontSize: 15
												                },
												                grid: {
												                    odd: {
												                        opacity: 0.25,
												                        fill: '#ddd',
												                        stroke: '#bbb',
												                        'stroke-width': 0.5
												                    }
												                },
												                minimum: 0
													       		 }, 

													       			{
													                type: 'category',
													                position: 'bottom',
													             	fields: ['name'],
													         }],
													            
													    series: [ {
													                type: 'line',
													                highlight: {
													                    size: 7,
													                    radius: 7
													                },
													                style: {
													                    stroke: '#F0A50A'
													                },
																	markerConfig: {
													                    type: 'circle',
																		size: 1,
																		radius: 1,
																		stroke: '#F0A50A',
																		'stroke-width': 1
													                },
																	fill: false,
																	smooth: true,
													                xField: 'name',
													                yField: 'data1'
													               
													            }]
													},
													{

														xtype: 'fieldset',
														id : 'currentTableView',
														items: [
														        {
														        	xtype: 'panel',
																	width: '100%',
																	height : '100%',
																	styleHtmlContent: true,
																	html: [generateHtmlcurrentTable(storeCurrent)],
														        }
															]
								 	                }
							 	                  ]
					 	           				}
					 	     				]
					 	      		 },
		
//***************************************** Day View *********************************************************				                
				                
				            {
				                title: '日',
				                iconCls: 'cld',
				                styleHtmlContent: true,
								scrollable: true,
								
								listeners: {
									activate: function() {
										 document.location.href = "dayView.html"
									}
								}
				            },
				            
// ******************************************** Month View *************************************************************				            
				            
				            {
				                title: '月',
				                iconCls: 'cld',
				                styleHtmlContent: true,
								scrollable: true,
				                listeners: {
									activate: function() {
										 document.location.href = "monthView.html"
									}
								}
				            },

// *************************************************** Year View *******************************************************			 	                

				           	{
				                title: '年',
				                iconCls: 'cld',
				                styleHtmlContent: true,
								scrollable: true,
				                listeners: {
									activate: function() {
										 document.location.href = "yearView.html"
									}
										
										
								}
				           	},
				                
//************************************** Statistic View *********************************************************************************************

				            {
				                title: '統計',
				              	iconCls: 'chart',
				              	styleHtmlContent: true,
								scrollable: true,
				                listeners: {
									activate: function() {
										 document.location.href = "statisticView.html"
									}
								}
				            }
							]
					});
				}
			});
		</script>
	 </head>
	 <body>
	 </body>
	</html>
